/**
 * 使用 setState 修改状态
 * setState的作用：更新state，驱动界面变化
 * 语法： this.setState({属性名：值})
 * 注意：只能通过 setState 修改数据 - 不允许直接修改 state
 */

import React from 'react';
//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';

class App extends React.Component {
  // 状态变量
  state = {
    msg: 'Hello World！！！',
    count: 100,
  };
  handleClick = () => {
    // this.setState({})修改状态变量的唯一方法
    // 正确写法
    this.setState({
      msg: 'Hello React！！',
    });

    //错误写法
    // this.state.msg = 'Hello React！！';
    // this.state.count += 1;
  };
  handleClick2 = () => {
    // this.setState({})修改状态变量的唯一方法
    this.setState({
      count: this.state.count + 1,
    });
  };
  render() {
    return (
      <div>
        <h3>
          {this.state.msg}————{this.state.count}
        </h3>
        <button onClick={this.handleClick}>点我修改msg</button>
        <button onClick={this.handleClick2}>点我修改count</button>
      </div>
    );
  }
}

// 这是React18版本新出的挂载节点的方法
const root = createRoot(document.getElementById('root'));
root.render(<App></App>);
